<template>
  <div style="margin: 8px 8px ;">
    <div class="opt-area-02">
      <div class="right-con">
        <div class="input-frame" style="width: 400px;" >
          <Select placeholder="未检轮次" v-model="lieList"  multiple style="width:100%" >
            <Option v-for="item in lie" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <DatePicker type="date" v-model="params.check_date" :options="options1" placeholder="比对核酸采集日期" style="width: 164px" />
        </div>
        <Button class="table-action-btn" type="success" @click="createSelect()">创建查询</Button>
        <Button class="table-action-btn" type="info" @click="init">刷新</Button>
      </div>
    </div>
    <Table border :columns="columns" :data="tableData" :loading="loading">
      <template slot-scope="{ row }" slot="lunTag">
        <Tag color="blue" v-for="item in row.lunTag" :key="item.value" >{{item.label}}</Tag>
      </template>
      <template slot-scope="{ row }" slot="state">
        <Tag color="blue" v-show="row.state === '0'">草稿</Tag>
        <Tag color="cyan" v-show="row.state === '1'">已提交</Tag>
        <Tag color="green" v-show="row.state === '2'">已完成</Tag>
      </template>
        <template slot-scope="{ row }" slot="caozuo">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button type="success" size="small" @click="submit(row)"  v-show="row.state === '0'">提交</Button>
          <Button type="primary" size="small" style="margin-left: 5px" v-show="row.state === '2'" @click="showQst(row)">查看趋势图</Button>
        </Row>
      </template>
    </Table>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="changeSize" style="height: 30px;line-height: 30px;font-size: 12px;float:right;margin-top:5px" />
    <Drawer :title="drawer.title"  :width="drawer.width" :mask-closable="true" v-model="drawer.show">
      <Card>
        <Table border :columns="columns2" :data="tableData2" >
        </Table>
      </Card>
      <Card style="margin-top: 5px;">
        <nucleic-sh-trend-line-echart :width="echartWidth" :height="400" ref="nucleicShTrendLineEchart"></nucleic-sh-trend-line-echart>
      </Card>
    </Drawer>
  </div>
</template>

<script>
import { createSHQSTTask, date2str, getTaskList, updateSHQSTTask, getcountList } from '@/api/eventlist'
import { findLabelList } from '@/api/grid'
import NucleicShTrendLineEchart from './components/nucleic-sh-trend-line-echart'
export default {
  name: 'index',
  components: {
    NucleicShTrendLineEchart
  },
  data () {
    return {
      options1: {
        disabledDate (date) {
          let dateTime = new Date()
          let currentYear = dateTime.getFullYear()
          let currentMonth = dateTime.getMonth()
          let monthFirstDay = new Date(currentYear, currentMonth, 1)

          let newMonth = ++currentMonth
          // eslint-disable-next-line no-unused-vars
          let newYear = currentYear
          if (newMonth >= 12) {
            newMonth -= 12
            newYear++
          }
          // let nextMonthFirst = new Date(newYear, newMonth, 1)
          // let nonthLastDay = new Date(
          //   nextMonthFirst.getTime() - 24 * 60 * 60 * 1000
          // )
          return (
            date.valueOf() < new Date(monthFirstDay).getTime()
          )
        }
      },
      echartWidth: (1100),
      drawer: {
        title: '',
        type: '',
        show: false,
        columns: [],
        tableData: [],
        loading: false,
        width: 500
      },
      lieList: [],
      columns: [
        { type: 'index', fixed: 'left', width: '80', title: '序号', align: 'center' },
        { title: '未检轮次', slot: 'lunTag', align: 'center' },
        { title: '比对核酸采集日期', key: 'check_date', width: 140, align: 'center' },
        { title: '创建时间', key: 'task0time', width: 150, align: 'center' },
        { title: '提交时间', key: 'task1time', width: 150, align: 'center' },
        { title: '完成时间', key: 'task2time', width: 150, align: 'center' },
        { title: '状态', slot: 'state', width: 120, align: 'center' },
        { title: '操作', fixed: 'right', width: '200', slot: 'caozuo', align: 'center' }
      ],
      tableData: [],
      columns2: [
        { title: '时间', key: 'label', width: 120, align: 'center' },
        { title: '06-08', key: '06-08', align: 'center' },
        { title: '08-10', key: '08-10', align: 'center' },
        { title: '10-12', key: '10-12', align: 'center' },
        { title: '12-14', key: '12-14', align: 'center' },
        { title: '14-16', key: '14-16', align: 'center' },
        { title: '16-18', key: '16-18', align: 'center' },
        { title: '18-20', key: '18-20', align: 'center' },
        { title: '20-22', key: '20-22', align: 'center' }
      ],
      tableData2: [],
      echarData: [
        { region: '6-8', num: 0 },
        { region: '8-10', num: 1 },
        { region: '10-12', num: 4 },
        { region: '12-14', num: 20 },
        { region: '14-16', num: 0 },
        { region: '16-18', num: 0 },
        { region: '18-20', num: 10 },
        { region: '20-21', num: 0 }
      ],
      loading: false,
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      params: {
      },
      lie: []
    }
  },
  computed: {
    severUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  },
  watch: {
    lieList (val) {
      console.log(val + '2222')
      if (val && val.length > 0) {
        this.params.lun = val.join(',')
      }
    }
  },
  methods: {
    initEchars () {
      this.$refs.nucleicShTrendLineEchart.chart(this.echarData)
    },
    createSelect () {
      if (this.params.check_date) {
        this.params.check_date = date2str(this.params.check_date)
      }
      createSHQSTTask(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '操作成功!', desc: res.data.errmsg })
          this.loading = false
          this.init()
        } else {
          this.$Notice.error({
            title: '操作失败!',
            desc: res.data.errmsg
          })
        }
      })
      console.log(this.params)
    },
    submit (row) {
      let params = {}
      params.id = row.id
      updateSHQSTTask(params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '操作成功!', desc: res.data.errmsg })
          this.loading = false
          this.lieList = []
          this.params = {}
          this.init()
        } else {
          this.$Notice.error({
            title: '操作失败!',
            desc: res.data.errmsg
          })
        }
      })
    },
    async showQst (row) {
      this.drawer.title = '补检趋势图'
      this.drawer.show = true
      this.drawer.width = '1100'
      let params = {}
      params.id = row.id
      await getcountList(params).then(res => {
        if (res.data.errcode === 0) {
          this.echarData = res.data.data.list
          for (const echar of this.echarData) {
            echar['percentage1'] = echar.percentage.replace('%', '')
          }
          const data = [
            { label: '补检完成率' },
            { label: '补检人数' },
            { label: '总补检人数' }
          ]
          for (const lie of this.columns2) {
            for (const row of this.echarData) {
              if (lie.key === row.hh) {
                data[0][row.hh] = row.percentage
                data[1][row.hh] = row.num
                data[2][row.hh] = row.hh_total_num
              }
            }
          }
          this.tableData2 = data
        } else {
          this.$Notice.error({
            title: '操作失败!',
            desc: res.data.errmsg
          })
        }
      })
      await this.initEchars()
    },
    async init () {
      this.loading = true
      await getTaskList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.tableData = res.data.data.results
          for (const row of this.tableData) {
            let lunTag = []
            for (const lie of this.lie) {
              const lunList = row.lun.split(',')
              for (const lun of lunList) {
                if (lun === lie.value) {
                  lunTag.push({
                    value: lun,
                    label: lie.label
                  })
                }
              }
            }
            console.log(lunTag)
            row.lunTag = lunTag
          }
          console.log(this.tableData)
          this.totalnum = res.data.data.totalRecord
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
          this.loading = false
        }
      })
    },
    async initLabel () {
      await findLabelList().then(res => {
        if (res.data.errcode === 0) {
          this.lie = res.data.data
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.params.pageNo = pageNo
      this.init()
    },
    changeSize (pageSize) {
      this.currentPageSize = pageSize
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    async initAll () {
      await this.initLabel()
      await this.init()
    }
  },
  mounted () {
    this.initAll()
  }
}
</script>

<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}
.opt-area-02 .left-con span {
  font-weight: bold;
}
.opt-area-02 .right-con input {
  width: 164px;
  margin-right: 10px;
}
.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.table-action-btn {
  margin-right: 3px;
}
.page_style {
  margin-bottom: 5px;
}
.page_style .input-vaccines .ivu-select-single .ivu-select-selection {
  height: 50px;
  position: relative;
}
.page_style .ivu-select-selection .ivu-select-selected-value {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 24px;
}
.red-star {
  font-family: SimSun;
  color: #f00;
  margin-right: 4px;
}
#hengchuanselect1 .ivu-select-dropdown{
  max-height: 500px;
}
#hengchuanselect2 .ivu-select-dropdown{
  max-height: 500px;
}
#hengchuanselect3 .ivu-select-dropdown{
  max-height: 400px;
}
.ivu-form-inline .ivu-form-item {
  width: 100%;
}
.rowFa {
  min-height: 40px;
}
.colLelft,
.colRight {
  padding: 1px;

}
.colLeft {
  padding: 3px 0;
  text-align: center;
  line-height: 40px;
  background-color: rgba(0, 153, 255, 0.3);
}
.colRight {
  padding: 3px 0;
  text-indent: 2em;
  line-height: 40px;
  background-color: rgba(0, 153, 255, 0.1);

}
>>> .ivu-table-wrapper,>>> .ivu-table {
  overflow: initial;
}
</style>
